<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>GoJS Highlighting -- Northwoods Software</title>
  <!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
    <script src="go.js"></script>
  <script src="goIntro.js"></script>
</head>
<body onload="goIntro()">
<div id="container" class="container-fluid">
<div id="content">

<h2>Highlighting</h2>
<p>
  It is common to make a Node (or a part of a Node or a Link) stand out by "highlighting" it in some way.
  This happens with selection when a selection Adornment is shown.
  However one frequently wants to highlight Parts independently of selection.
  This can be done by changing the fill or stroke of a Shape, replacing a Picture source with another source, adding or removing a shadow, and so on.
</p>

<h3>Highlighting a Node upon Mouse Over</h3>
<p>
  The most general kind of highlighting is to change appearance when an action occurs, such as mousing over a node.
  This can draw attention to interactive Nodes or Links or really any GraphObject, such as buttons.
  This is why <a href="buttons.html">predefined buttons in GoJS</a> highlight on mouse-over.
</p>
<p>
  To achieve this effect you just need to define <a>GraphObject.mouseEnter</a> and <a>GraphObject.mouseLeave</a> event handlers.
</p>
<pre data-language="javascript" id="button">
  diagram.initialContentAlignment = go.Spot.Center;

  function mouseEnter(e, obj) {
    var shape = obj.findObject("SHAPE");
    shape.fill = "#6DAB80";
    shape.stroke = "#A6E6A1";
    var text = obj.findObject("TEXT");
    text.stroke = "white";
  };

  function mouseLeave(e, obj) {
    var shape = obj.findObject("SHAPE");
    // Return the Shape's fill and stroke to the defaults
    shape.fill = obj.data.color;
    shape.stroke = null;
    // Return the TextBlock's stroke to its default
    var text = obj.findObject("TEXT");
    text.stroke = "black";
  };

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      {
        mouseEnter: mouseEnter,
        mouseLeave: mouseLeave
      },
      $(go.Shape, "Rectangle",
        { strokeWidth: 2, stroke: null, name: "SHAPE" },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 10, font: "bold 18px Verdana", name: "TEXT" },
        new go.Binding("text", "key"))
    );

  diagram.model = new go.GraphLinksModel(
  [
    { key: "Alpha", color: "#96D6D9" },
    { key: "Beta",  color: "#96D6D9" },
    { key: "Gamma", color: "#EFEBCA" },
    { key: "Delta", color: "#EFEBCA" }
  ],
  [
    { from: "Alpha", to: "Beta" },
    { from: "Alpha", to: "Gamma" },
    { from: "Beta", to: "Beta" },
    { from: "Gamma", to: "Delta" },
    { from: "Delta", to: "Alpha" }
  ]);
</pre>
<script>goCode("button", 600, 150)</script>

<p>Mouse-over nodes to see them highlight.</p>

<p>
  It is also commonplace to perform highlighting of stationary Parts during a drag, which is a different case of "mouse over".
  This can be implemented in a manner similar to the mouseEnter/mouseLeave events by implementing
  <a>GraphObject.mouseDragEnter</a> and <a>GraphObject.mouseDragLeave</a> event handlers.
  Several samples demonstrate this: <a href="../samples/orgChartEditor.html">Org Chart Editor</a>,
  <a href="../samples/planogram.html">Planogram</a>, <a href="../samples/regrouping.html">Regrouping</a>,
  and <a href="../samples/seatingChart.html">Seating Chart</a>.
</p>

<h3>Highlighting Nodes and Links</h3>
<p>
  It is common to want to show Nodes or Links that are related to a particular Node.
  Unlike the mouse-over scenarios, one may want to maintain the highlighting for many Parts
  independent of any mouse state or selection state.
</p>
<p>
  Here is an example of highlighting all of the nodes and links that come out of a node that the user clicks.
  This example uses the <a>Part.isHighlighted</a> property and data binding of visual properties to that Part.isHighlighted property.
</p>
<pre data-language="javascript" id="treeExpanderButton">
  diagram.initialContentAlignment = go.Spot.Center;

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { // when the user clicks on a Node, highlight all Links coming out of the node
        // and all of the Nodes at the other ends of those Links.
        click: function(e, node) { showConnections(node); }  // defined below
      },
      $(go.Shape, "Rectangle",
        { strokeWidth: 2, stroke: null },
        new go.Binding("fill", "color"),
        // the Shape.stroke color depends on whether Node.isHighlighted is true
        new go.Binding("stroke", "isHighlighted", function(h) { return h ? "red" : "black"; })
            .ofObject()),
      $(go.TextBlock,
        { margin: 10, font: "bold 18px Verdana" },
        new go.Binding("text", "key"))
    );

  // define the Link template
  diagram.linkTemplate =
    $(go.Link,
      { routing: go.Link.Normal, toShortLength: 4, selectable: false },
      $(go.Shape,
        { isPanelMain: true, stroke: "black", strokeWidth: 1 },
        // the Shape.stroke color depends on whether Link.isHighlighted is true
        new go.Binding("stroke", "isHighlighted", function(h) { return h ? "red" : "black"; })
            .ofObject()),
      $(go.Shape,
        { toArrow: "standard", stroke: null, strokeWidth: 0 },
        // the Shape.fill color depends on whether Link.isHighlighted is true
        new go.Binding("fill", "isHighlighted", function(h) { return h ? "red" : "black"; })
            .ofObject())
    );

  // highlight all Links and Nodes coming out of a given Node
  function showConnections(node) {
    var diagram = node.diagram;
    diagram.startTransaction("highlight");
    // remove any previous highlighting
    diagram.clearHighlighteds();
    // for each Link coming out of the Node, set Link.isHighlighted
    node.findLinksOutOf().each(function(l) { l.isHighlighted = true; });
    // for each Node destination for the Node, set Node.isHighlighted
    node.findNodesOutOf().each(function(n) { n.isHighlighted = true; });
    diagram.commitTransaction("highlight");
  }

  // when the user clicks on the background of the Diagram, remove all highlighting
  diagram.click = function(e) {
    diagram.startTransaction("no highlighteds");
    diagram.clearHighlighteds();
    diagram.commitTransaction("no highlighteds");
  };

  diagram.model = new go.GraphLinksModel(
    [
      { key: "Alpha", color: "#96D6D9" },
      { key: "Beta",  color: "#96D6D9" },
      { key: "Gamma", color: "#EFEBCA" },
      { key: "Delta", color: "#EFEBCA" }
    ],
    [
      { from: "Alpha", to: "Beta" },
      { from: "Alpha", to: "Gamma" },
      { from: "Beta", to: "Beta" },
      { from: "Gamma", to: "Delta" },
      { from: "Delta", to: "Alpha" }
    ]);
</pre>
<script>goCode("treeExpanderButton", 600, 200)</script>

<p>
  Click on a node to highlight outbound connected links and nodes.
  Click in the diagram background to remove all highlights.
  Note that the highlighting is independent of selection.
</p>
<p>
  The use of data binding to modify the Shape properties allows you to avoid specifying names for each Shape
  and writing code to find the Shape and modify its properties.
</p>

</div>
</div>
</body>
</html>
